body {

    // 背景浅灰
    background-color: #f8f8f8;

    // body>#header-box
    // &相当于把父级选择器抄过来
    &>#header-box {

        &>.menu-box {
            // 白色背景
            background-color: white;

            &>.middle-box {

                &>ul {
                    // 与父容器等高
                    height: 100%;

                    width: 641px;
                    margin: 0 auto;

                    &>li {
                        height: 100%;
                        line-height: 48px;

                        // 水平横排
                        float: left;

                        margin: 0 20px;
                        font-size: 16px;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    /* banner区域 */
    &>.banner {
        position: relative;

        /* 左侧垂直菜单区 */
        &>.menu-box {

            /* 盒模型样式 */
            width: 229px;
            height: 477px;
            box-sizing: border-box;

            /* 定位到左侧 + 向上突破父盒子 */
            position: absolute;
            left: 0;
            top: -51px;

            /* 文字样式 */
            text-align: left;

            /* 弹性盒设置 */
            display: flex;
            flex-direction: column;

            >h3 {
                height: 50px;
                line-height: 50px;
                padding-left: 12px;
                font-weight: 600;
                font-size: 16px;
            }

            >ul {
                // height: 418px;
                // box-sizing: border-box;
                font-size: 12px;

                /* 弹性盒设置 */
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                >li {
                    flex: 1;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    padding-left: 12px;
                    padding-right: 5px;

                    >i:first-child {
                        margin-right: 5px;
                    }

                    >span {
                        flex: 1;
                        padding-left: 5px;
                    }

                    >i:last-child {
                        /* 文字样式 */
                        color: #bfbfbf;
                        font-size: 5px;
                    }
                }

                >li:hover {
                    background-color: #fff0dd;
                    color: #333;

                    >i:last-child {
                        color: #333;
                    }
                }
            }
        }

        /* 右侧豆腐块区域 */
        &>.toufu-box {
            width: 961px;
            height: 426px;
            box-sizing: border-box;
            // background-color: #fc49ff;

            // 右浮动
            float: right;

            &>div {
                float: left;
                margin: 10px 0 0 10px;
                // border: 1px solid black;
            }

            /* 123等高 */
            >.toufu1,
            >.toufu2,
            >.toufu3 {
                height: 239px;
                background-color: #6dacff;
            }

            /* 4567等高 */
            >.toufu4,
            >.toufu5,
            >.toufu6,
            >.toufu7 {
                height: 166px;
                background-color: #ea80ff;
            }

            /* 26等宽151 */
            >.toufu2,
            >.toufu6 {
                width: 151px;
            }

            /* 37等宽 230 */
            >.toufu3,
            >.toufu7 {
                width: 230px;
            }

            /* 45等宽 271 */
            >.toufu4,
            >.toufu5 {
                width: 270px;
            }

            /* 14左margin扩大为10 */
            >.toufu1,
            >.toufu4 {
                margin-left: 10px;
            }

            /* 豆腐1之未hover */
            >.toufu1 {
                width: 550px;
                position: relative;

                >.btn {
                    width: 38px;
                    height: 38px;

                    /* 单行文字宽高居中 */
                    line-height: 38px;
                    text-align: center;

                    // 将当前盒子做成球
                    border-radius: 50%;

                    /* 黑底白字 默认全透明不可见 */
                    background-color: #0000;
                    color: #fff0;
                    font-size: 20px;

                    /* 绝对定位 + 垂直居中 */
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);

                    // 默认不显示
                    // display: none;

                    /* 
                    transition = 过渡动画
                    all = 所有样式
                    0.5s/.5s = 半秒时间
                    linear = 匀速变化 
                    */
                    transition: all .5s linear;
                }


                /* 上一张 */
                .btn-prev {
                    left: 15px;
                }

                /* 下一张 */
                .btn-next {
                    right: 15px;
                }
            }

            /* 豆腐1之已hover */
            >.toufu1:hover {
                >.btn {
                    // 默认不显示 我爹被hover时才显示
                    // display: block;

                    /* 通过恢复透明度令元素可见 */
                    background-color: #0008;
                    color: #ffff;
                }
            }


            /* 点击jumper可以跳转页面 */
            >.jumper {
                >a {
                    // display: inline;
                    // 把行级/行内元素变成行内块 
                    // 水平排列（行内特性） + 完整的盒模型（块级特性）
                    display: inline-block;

                    width: 100%;
                    height: 100%;
                }
            }

            /* 设置一堆盒子的背景图片 */
            .toufu1 {

                // 背景图片
                // background-image: url("../imgs/lunbotu.png");

                // // 摆放的偏移量 默认0 0
                // // background-position: 100px 100px;
                // background-position: 0 0;

                // // 设置背景图是否重复
                // background-repeat: no-repeat;

                // /* 上面的内容三合一写法 */
                // 图片 + 偏移 + 是否重复
                background: url("../imgs/lunbotu.png") 0 0 no-repeat;

                // contain包含：缩放到恰好包含完整图片
                // background-size:contain;

                // cover覆盖：图片恰好将盒子完整覆盖
                background-size: cover;
            }

            .toufu2 {
                background: url("../imgs/maikefeng.jpg") 0 0/cover no-repeat;
            }

            .toufu4 {
                background: url("../imgs/jiudian.png") 0 0/cover no-repeat;
            }

            .toufu5 {
                background: url("../imgs/jita.jpg") 0 0/cover no-repeat;
            }

            .toufu6 {
                background: url("../imgs/woshishangjia.jpg") 0 0/cover no-repeat;
            }

            >.toufu3 {
                /* 弹性盒属性 */
                // 直排弹性盒
                display: flex;
                flex-direction: column;

                // 纵向主轴 均匀分布元素
                justify-content: space-between;

                // 横向交叉 子元素居中
                align-items: center;


                /* 盒模型属性 */
                padding-top: 30px;
                padding-bottom: 20px;


                >img {
                    width: 56px;
                    height: 56px;
                    box-sizing: border-box;
                    border: 4px solid #e5e5e5;
                    border-radius: 50%;
                }

                >.btn-login {
                    background-color: #ffc100;
                }

                >.btn-register {
                    background-color: white;
                }

            }

            >.toufu7 {
                /* 弹性盒属性 */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                >img {
                    width: 95px;
                }

                >.app {
                    margin-top: 4px;
                    font-size: 16px;
                }

                >.hi {
                    font-size: 12px;

                    >span:first-child {
                        color: red;
                    }
                }
            }

        }


    }

    /* 猫眼电影 */
    >.maoyan {
        >.title-box {
            background-color: #fb3f61;
        }

        .content-box {
            >ul {
                padding: 2px 20px;

                >li {
                    /* box */
                    width: 215px;
                    height: 299px;
                    margin-bottom: 0;
                    background: url(../imgs/movie.jpg) 0 0 / cover no-repeat;
                    border-radius: 5px;

                    // 子元素要相对于当前盒子做绝对定位
                    position: relative;

                    /* 渐变色遮罩 */
                    // >.mask {
                    //     width: 100%;
                    //     height: 100%;
                    //     // background-color: black;
                    //     background-image: linear-gradient(0deg,#000c,transparent 40%);

                    //     position: absolute;
                    //     left: 0;
                    //     top: 0;
                    // }

                    /* 电影标签在左上角 */
                    >.lt {
                        /* box */
                        background-color: #17a6ff;
                        color: white;
                        padding: 2px 5px;

                        /* text */
                        font-size: 12px;
                        font-weight: bold;
                        font-style: italic;

                        /* position */
                        top: 10px;
                        left: -5px;
                    }

                    /* 电影信息在左下角 */
                    >.lb {
                        /* position */
                        left: 10px;
                        bottom: 10px;

                        /* text */
                        font-size: 16px;
                        color: white;

                        >div {
                            .small {
                                font-size: 12px;
                                font-weight: bold;
                            }

                            .fen {
                                color: orange;
                            }
                        }
                    }

                    /* 购票按钮在右下角 */
                    >.rb {
                        /* position */
                        right: 10px;
                        bottom: 10px;

                        button {
                            background-color: #ff4949;
                            padding: 2px 10px;
                            border: none;
                            border-radius: 15px;

                            /* text */
                            color: white;
                        }
                    }
                }

                /* 海报的黑色遮罩 */
                >li::before {
                    content: "";

                    width: 100%;
                    height: 100%;
                    // background-color: black;
                    background-image: linear-gradient(0deg, #000c, transparent 40%);

                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
    }

    /* 推荐民宿 */
    >.minsu {
        >.title-box {
            background-color: #f2be47;
        }

        >.content-box {
            >ul {
                padding-bottom: 0;

                >li {
                    width: 371px;
                    height: 314px;
                    background-color: #fff;
                    margin-bottom: 0;

                    >.img-box {
                        width: 100%;
                        height: 208px;
                        background: url(../imgs/minsu.jpg) 0 0 / cover no-repeat;
                        border-radius: 5px;

                        position: relative;

                        >img {
                            width: 51px;
                            height: 51px;
                            box-sizing: border-box;
                            border-radius: 50%;
                            border: 2px solid white;

                            right: 15px;
                            bottom: -26px;
                        }
                    }

                    >.name {
                        width: 75%;
                        margin-top: 5px;
                        margin-bottom: 5px;

                        color: #222;
                        font-size: 16px;
                    }

                    >.xinxi {
                        margin-top: 5px;
                        margin-bottom: 5px;

                        color: #999;
                        font-size: 12px;
                    }

                    >.jiage {
                        margin-top: 5px;
                        margin-bottom: 5px;
                        color: #f60;

                        >span:first-child {
                            font-size: 14px;
                            margin-right: -5px;
                        }

                        >span:last-child {
                            font-size: 22px;
                        }
                    }
                }
            }
        }
    }

    /* 猜你喜欢 */
    >.xihuan {
        >.title-box {
            background-color: #51b3d8;
        }

        >.content-box {
            >ul {
                padding: 9px;
                padding-bottom: 7px;

                >li {
                    /* box */
                    width: 233px;
                    height: 244px;
                    box-sizing: border-box;
                    margin-bottom: 2px;
                    padding: 10px;
                    background-color: #fff;
                    border-radius: 5px;

                    /* flex */
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    >img {
                        width: 100%;
                        border-radius: 5px;
                    }

                    // .name {}

                    .pingfen-box {
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        .jindutiao {
                            width: 86px;
                            height: 19px;
                            // background-color: #000;
                            position: relative;
                            margin-right: 10px;

                            >ul {
                                width: 100%;
                                height: 100%;

                                top: -4px;

                                display: flex;
                                flex-direction: row;
                                justify-content: start;

                                >li {
                                    margin-left: 2.9px;

                                    >i {
                                        font-size: 13px;
                                        color: #999;
                                    }
                                }
                            }

                            >ul.golden {
                                width: 50%;
                                overflow: hidden;

                                >li {
                                    >i {
                                        color: orange;
                                    }
                                }
                            }
                        }

                        >span {
                            font-size: 12px;
                            color: #999;
                        }
                    }

                    .dizhi {
                        font-size: 12px;
                        color: #999;
                    }

                    .jiage-box {
                        color: #f60;
                        font-weight: bold;

                        >span:nth-child(1) {
                            font-size: 14px;
                        }

                        >span:nth-child(2) {
                            font-size: 22px;
                        }

                        >span:nth-child(3) {
                            font-size: 12px;
                        }
                    }
                }

                >li:hover {
                    background-color: #f9f9f9;
                }

            }
        }
    }


    /* 美团导航 */
    >.daohang {
        padding-left: 20px;

        /* 美团导航字样 */
        >h3 {
            height: 50px;

            /* text */
            line-height: 50px;
            color: #222;
            font-size: 16px;
            font-weight: 500;
        }

        /* 直排div*3 */
        >.box {
            height: 222px;
            box-sizing: border-box;

            /* 直排弹性盒 */
            display: flex;
            flex-direction: column;

            /* 定义城市、分类、周边三者间的共性 */
            >.row {
                flex: 1;

                /* flex */
                display: flex;

                /* 分类导航名称 */
                >.name {
                    width: 78px;
                }

                /* 分类导航列表 */
                >ul {
                    flex: 1;
                    border-bottom: 1px solid #e5e5e5;
                    margin-bottom: 8px;

                    >li {
                        float: left;

                        /* box */
                        width: 105px;
                        height: 34px;
                        box-sizing: border-box;
                        padding-top: 3px;

                        /* text */
                        // 文字左对齐
                        text-align: left;
                        font-size: 12px;
                        color: #666;

                        /* 文本不折行 + 省略号 */
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                    /* 每个Li被覆盖时手型+变色 */
                    >li:hover {
                        cursor: pointer;
                        color: #f60;
                    }
                }
            }

            /* 最后一个row下的ul无底边 */
            >.row:last-child>ul {
                border-bottom: none;
                margin-bottom: 0;
            }
        }
    }

    /* 友情链接 */
    >.lianjie {

        /* box */
        // background-color: #fff;
        margin: 38px auto;
        border-top: 1px solid #e5e5e5;
        padding: 40px 45px;
        box-sizing: border-box;

        /* flex */
        display: flex;
        flex-direction: row;

        /* 横排5个列 */
        >.column {
            /* 每列宽度相同 */
            flex: 1;

            /* 分类导航 */
            >dl {
                padding-bottom: 20px;

                /* 分类标题 */
                >dt {
                    height: 28px;
                    line-height: 28px;

                    /* 个别标题本身包含可以跳转的链接 */
                    >a {
                        font-size: 14px;
                        color: #666;
                    }
                }

                /* 单个超链接容器单元格 */
                >dd {
                    /* text */
                    // height: 24px;
                    line-height: 24px;
                    font-size: 12px;
                    color: #666;
                }

                /* 设置超链接样式 */
                a {
                    font-size: 12px;
                    color: #666;
                }

                a:hover {
                    color: orange;
                }
            }
        }
    }


    /* 页脚 */
    .yejiao {
        /* box */
        padding-top: 20px;
        border-top: 1px solid #e5e5e5;

        /* text */
        color: #999;
        font-size: 12px;

        a {
            color: #999;
            font-size: 12px;
        }

        /* 所有超链接鼠标覆盖变色 */
        p:hover,span:hover,a:hover {
            cursor: pointer;
            color: orange;
        }

        /* 左浮动盒子 */
        .left-box {

            >div,
            >p {
                margin-bottom: 5px;
            }

            >div.row1 {
                >a {
                    margin-left: 10px;
                }
            }
        }

        /* 右浮动盒子 */
        >.right-box {
            /* flex */
            display: flex;
            flex-direction: column;
            // 水平方向（交叉）靠右
            align-items: end;

            /* 第一行 */
            >.top {
                margin-bottom: 5px;
            }

            /* 第二行 */
            >.bottom {
                /* 横排弹性盒 子元素纵向居中对齐 */
                display: flex;
                flex-direction: row;
                align-items: center;

                >img {
                    width: 38px;
                }

                /* 最后两个盒子使用精灵图 */
                >.col2,
                >.col3 {
                    background-image: url(../imgs/sprite.png);
                    background-repeat: no-repeat;
                    width: 111px;
                    height: 39px;
                    margin-left: 2px;
                }

                /* 从精灵图上截取合适位置作为盒子背景 */
                >.col2 {
                    background-position: 0 -167px;
                }

                >.col3 {
                    background-position: 0 -40px;
                }

            }
        }
    }

    /* 给页头添加盒子阴影 */
    >#header-box {
        box-shadow: 0 2px 27px 0 rgb(0 0 0 / 10%);
    }

    /* 给酒店后追加HOT伪元素装饰 */
    #the-li::after {
        content: "HOT";

        /* 伪元素无非也就是另外一个普通盒子罢惹 */
        font-size: 12px;
        color: #fff;
        background: #FF4848;
        font-weight: 400;
        border-radius: 10px;
        padding: 0 6px;
        margin: 0 5px;
        position: relative;
        top: -1px;
        left: -1px;
    }

    /* 标题盒子的“三角形”指示器 */
    .bankuai-box {
        >.title-box {
            >ul {

                >li:nth-child(2)::after,
                >li:hover::after {
                    content: "";

                    /* box */
                    width: 2px;
                    height: 0px;
                    display: block;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    border-bottom: 7px solid white;

                    /* position */
                    position: relative;
                    top: -6px;
                    margin: 0 auto;
                }

                >li:nth-child(1)::after {
                    display: none;
                }
                
            }
        }
    }
}